<template>
    <div class=box>
      <div class="head">
        <van-nav-bar title="收货地址管理"  
      @click-left="onClickLeft">
    <template #left>
      <van-icon name="arrow-left" size="26" color="black"/>
    </template>
  </van-nav-bar>
      </div>
      <div class="main">
          <div class="address">
            <van-address-list
    v-model="chosenAddressId"
    :list="list"
    :disabled-list="disabledList"
    disabled-text="以下地址超出配送范围"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
  />
  <van-area title="标题" :area-list="areaList" />
          </div>

      </div>
    </div>
  </template>
  
  <script>
  import Vue from 'vue';
  import { AddressList,
          Area,
           Toast} from 'vant';

  Vue.use(AddressList)
  Vue.use(Toast)
  Vue.use(Area);
 
  
  export default {
    data() {
      return {
        chosenAddressId: '1',
        list: [
          {
            id: '1',
            name: '张三',
            tel: '13000000000',
            address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
            isDefault: true,
          },
          {
            id: '2',
            name: '李四',
            tel: '1310000000',
            address: '浙江省杭州市拱墅区莫干山路 50 号',
          },
        ],
        disabledList: [
          {
            id: '3',
            name: '王五',
            tel: '1320000000',
            address: '浙江省杭州市滨江区江南大道 15 号',
          },
        ],
      };
    },
    methods: {
      onClickLeft(){
          this.$router.push("/home");
           },
      onAdd() {
        this.$router.push("/addaddress");
      },
      onEdit(item, index) {
        Toast('编辑地址:' + index);
      },
    },
  };
  </script>
  
  <style>
  
  </style>